

<template>
  <view class="mobile-item-container">
    <!-- 音乐播放区域 -->
    <view class="music-container">
      <view class="center-circle">
        <image :src="coverUrl || '/static/img/music/music.jpg'" class="center-icon" :class="{ 'rotate': isPlaying }"></image>
      </view>
      <!-- 仅在 isMonitoring 为 true 时显示入睡时间和睡眠时长 -->
      <template v-if="isMonitoring && fallAsleepTime">
        <view class="info-bubble volume">
          <text class="info-text">{{sleepDuration}}</text>
          <text class="info-label">睡眠时长</text>
        </view>
        <view class="info-bubble temperature">
          <text class="info-text">{{formatTime(fallAsleepTime)}}</text>
          <text class="info-label">入睡时间</text>
        </view>
      </template>
    </view>
    <!-- 播放提示文字 -->
    <view v-if="isPlaying === true" class="tip-container">
      <!-- <text class="playing-text">您的个性化音乐已创建，正在为您播放</text> -->
      <view style="height: 28%; width: 100%; justify-self: center;">
        <!-- 替换为自定义 noticBar 组件 -->
        <NoticeBar 
           v-if="musicList.length > 0 && currentIndex < musicList.length"
          :text="`当前播放: ${musicList[currentIndex].name} - ${musicList[currentIndex].singer}`"
          :speed="60"
          :width="700"
          :textHeight="100"
          :fontSize="50"
          style="height: 100%; width: 80%;"
        ></NoticeBar>
      </view>
      <view  style="height: 10%; width: 100%;">
        <view style="color: gray; font-size: 35rpx;">
          下一首: 
          {{ 
            musicList.length > currentIndex + 1
            ? `${musicList[currentIndex + 1].name} - ${musicList[currentIndex + 1].singer}`
            : '暂无歌曲'
          }}
        </view>
      </view>
      <!-- 直接插入 SleepGraph 组件的模板内容 -->
      <view class="sleep-graph-container">
        <view :style="{ width: '100%' , height: '500rpx'}">
          <l-echart   
            custom-style="background-color:aliceblue; margin:  auto ; width: 90%; height: 100%;
              margin-top: 30rpx; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 87%, 0 87%); 
              margin-bottom: -60rpx;" 
            ref="chartRef"  
          ></l-echart>
          <view
            class="customTooltips"  
            :style="{  left: position[0] + 'px', top: position[1] + 'px', backgroundColor: 'rgba(240, 248, 255, 0.7)' }"
            v-if="params.length && position.length && showTip"
          >
            <view class="tip-content" >
              <text>序号id </text>
              <text>{{ params.length > 1 ? params[1]['axisValue']:params[0]['axisValue']  }}</text>
            </view>
            <view class="tip-content" v-if="params.length > 1">
              <text>时间</text>
              <text>{{ params[0]['axisValue']  }}</text>
            </view>
            <view v-for="item in params" :key="item.seriesName">
              <view class="tip-content">
                <template v-if="!item.color.colorStops">
                  <view class="tip-color" :style="{ backgroundColor: item.color }"></view>
                  <text style="margin-right: 20rpx;">{{ item.seriesName }} </text>
                  <text>{{ item.value }} </text>
                </template>
                <template v-else>
                  <view class="tip-color" :style="{ backgroundColor: item.color.colorStops[0].color }"></view>
                  <text style="margin-right: 20rpx;">{{ item.seriesName }}</text>
                  <text>{{ getSleepStageLabel(item.value) }}</text>
                </template>
              </view>
            </view>
          </view>
          <view class="chart-section"  style="margin: auto; width: 90%;">
            <view class="legend-item">
              <view class="legend-color n1-sleep"></view>
              <text class="legend-text">N1浅睡一期</text>
            </view>
            <view class="legend-item">
              <view class="legend-color n2-sleep"></view>
              <text class="legend-text">N2浅睡二期</text>
            </view>
            <view class="legend-item">
              <view class="legend-color n3-sleep"></view>
              <text class="legend-text">N3深睡期</text>
            </view>
            <view class="legend-item">
              <view class="legend-color rem-sleep"></view>
              <text class="legend-text">REM快速眼动期</text>
            </view>
            <view class="legend-item">
              <view class="legend-color awake"></view>
              <text class="legend-text">W觉醒期</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="tip-container">
      <text class="playing-text">点击监测按钮，为您推荐个性化音乐</text>
    </view>
    <!-- 底部控制栏（3个按钮，统一圆形风格） -->
    <view class="music-controls" style="position: fixed; bottom: 120rpx; left: 50%; transform: translateX(-50%);">
      <view class="control-button" @click="collect">
        <!-- 更新收藏图标 -->
          <up-icon :name="musicList.length > 0 && currentIndex < musicList.length && musicList[currentIndex].isCollected === 1 ? `heart-fill` : `heart`" size="30" 
          :color="musicList.length > 0 && currentIndex < musicList.length && musicList[currentIndex].isCollected === 1 ? `#ee0000` : `#398ade`"></up-icon>
    
      </view>
      <view
        @click="monitoring"
        :style="{
          padding: '10rpx',
          width: '40%',
          height: '45%',
          borderRadius: '5%',
          backgroundColor: isPlaying ? 'red' : '#398ade',
          color:  '#ffffff',
          fontSize: '60rpx',
          fontWeight: 'bold',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          textAlign: 'center',
          lineHeight: '100rpx',
        }"
      >
        {{ isPlaying ? '停止' : '监测' }}
      </view>
      <view class="control-button" @click="list">
        <up-icon :name="`list-dot`" size="30" color="#398ade"></up-icon>
      </view>
    </view>
    <up-popup
      :safeAreaInsetBottom="true"
      :show="showPopup"
      :closeOnClickOverlay="true"
      round="10"
      @close="showPopup = !showPopup"
    >
      <view style=" margin: 40rpx 20rpx ">
        <view style=" margin-top: 0" >
          <up-text text="当前播放列表" bold size="30"></up-text>
        </view>
        <view class="u-popup-slot"
          :style="{
            width:  '100%',
            height: '50vh',
            margin: '0 auto',
          }"
        >
          <scroll-view  scroll-y="true" 
            style="height: 100%; width: 100%; margin: '0 auto';" 
          >
            <view style="margin: 40rpx 0rpx;"   
              v-for="(item, index) in musicList" :key="index" 
              v-if="musicList.length > 0" 
              @click="playMusic(index)" >
              <text class="song-title" :class="{ active: index === currentIndex }" space="nbsp" >{{item.name+"  "}} </text>
              <text class="singer-text" :class="{ active: index === currentIndex }" space="nbsp">-  {{item.singer}}</text>
            </view>
          </scroll-view>
        </view>
      </view>
    </up-popup>
    <tabbar :index="2"></tabbar>
  </view>
</template>

<script lang="ts" setup>
// @ts-ignore
import { ref, computed ,onMounted,onUnmounted } from 'vue';
// @ts-ignore
import { useStore } from 'vuex';
// 引入自定义组件
// @ts-ignore
import NoticeBar from '@/components/NoticeBar.vue';
// @ts-ignore
import type { MusicItem } from '@/types/music';
// @ts-ignore
import { getRecommendations } from '@/api/music'; // 引入接口方法
// 引入收藏接口
// @ts-ignore
import { toggleCollect } from '@/api/music'; 

// @ts-ignore
import { TGDConnect,TGDClose }from "@/uni_modules/dulab-geteeg";

// @ts-ignore
import { toast } from '@/uni_modules/uview-plus';

// 导入配置文件
import { baseURL } from '../../config';
/// @ts-nocheck
import * as echarts from 'echarts'

const store = useStore();

// 定义响应式数据
const showPopup = ref(false);
const coverUrl = ref('');

// 计算属性
const isMonitoring = computed({
  get(): boolean {
    // 兜底默认值：若 store 中未初始化，默认 false
    return store.state.music.isMonitoring ?? false; 
  },
  set(newValue: boolean) {
    store.dispatch('updateIsMonitoring', newValue);
  }
});

const fallAsleepTime = computed({
  get(): number {
    // 兜底默认值：若 store 中未初始化，默认 0
    return store.state.music.fallAsleepTime ?? 0; 
  },
  set(newValue: number) {
    store.dispatch('SET_FALL_ASLEEP_TIME', newValue);
  }
});

const musicList = computed({
  get(): any[] {
    // 双重兜底：先判断 isMonitoring，再处理 musicList 可能的 undefined
    return isMonitoring.value 
      ? (store.state.music.musicList || []) 
      : [];
  },
  set(newValue: any[]) {
    store.dispatch('updateMusicList', newValue);
  }
});

const currentIndex = computed({
  get(): number {
    // 兜底默认值：若 store.state.music.currentIndex 未定义，默认 0
    return isMonitoring.value 
      ? (store.state.music.currentIndex || 0) 
      : 0;
  },
  set(newValue: number) {
    store.dispatch('updateCurrentIndex', newValue);
  }
});

const isPlaying = computed({
  get(): boolean {
    // 兜底默认值：若 store.state.music.isPlaying 未定义，默认 false
    return isMonitoring.value 
      ? (store.state.music.isPlaying || false) 
      : false;
  },
  set(newValue: boolean) {
    store.dispatch('updateIsPlaying', newValue);
  } 
});
let chartRef = ref(null);
// 方法
const monitoring = async () => {
  console.log('监测');
  if (!isMonitoring.value) {
    try {
      const response = await getRecommendations(); // 调用接口获取推荐音乐数据
      // @ts-ignore
      const musicListData = response.data;
      const muscis = musicListData.map((music: any) => {
        return {
          id: music.musicId,
          name: music.name,
          singer: music.singer,
          album: music.album,
          // @ts-ignore
          url: `${process.env.BASE_URL}${music.url}`,
          // @ts-ignore
          cover: `${process.env.BASE_URL}${music.cover}`,
          duration: music.duration,
          isCollected: music.isCollected
        } as MusicItem; // 明确类型
      });
      store.dispatch('updateMusicList', muscis);
	  // #ifndef H5
	    const audio = uni.getBackgroundAudioManager();
	    audio.onEnded(() => {
	  		 console.log("背景音频自然播放结束事件触发");
	      store.dispatch('handleAudioEnded');
	    });
	  // #endif
      coverUrl.value = muscis[0].cover;
      isMonitoring.value = true;
      isPlaying.value = true;
      // 组件能被调用必须是组件的节点已经被渲染到页面上
      setTimeout(async()=>{
      if(chartRef.value) {
        await init()
      }
      },300)
    } catch (error) {
      console.error('获取推荐音乐数据失败:', error);
    }
  } else { 
    isMonitoring.value = false;
    isPlaying.value = false;
    coverUrl.value = '';
	close()
  }
};

const formatTime = (timestamp: number) => {
  const date = new Date(timestamp);
  // @ts-ignore
  const hours = String(date.getHours()).padStart(2, '0');
  // @ts-ignore
  const minutes = String(date.getMinutes()).padStart(2, '0');
  return `${hours}:${minutes}`;
};

const formatTime2 = (date: Date) => {
  // @ts-ignore
  const hours = String(date.getHours()).padStart(2, '0');
  // @ts-ignore
  const minutes = String(date.getMinutes()).padStart(2, '0');
  // @ts-ignore
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${hours}:${minutes}:${seconds}`;
};

// 新方法：计算睡眠时长
const getSleepDuration = () => {
  const now = new Date().getTime();
  const duration = now - fallAsleepTime.value;
  const hours = Math.floor(duration / (1000 * 60 * 60));
  const minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60));
  // 如果小时数为 0，则只显示分钟数
  if (hours === 0) {
    return `${minutes}分钟`;
  }
  return `${hours}小时${minutes}分钟`;
};

// 收藏方法
const collect = async () => {
  try {
    const currentMusic = musicList.value[currentIndex.value] as MusicItem; // 明确类型
    await toggleCollect(currentMusic.id); // 调用收藏接口
    // 更新音乐的收藏状态
    currentMusic.isCollected = currentMusic.isCollected === 0 ? 1 : 0;
    console.log("收藏状态已更新");
  } catch (error) {
    console.error('收藏音乐失败:', error);
    toast('收藏音乐失败');
  }
};

const list = () => {
  console.log('查看列表');
  showPopup.value = true;
};

const playMusic = (index: number) => {
  currentIndex.value = index;
  coverUrl.value = musicList.value[index].cover;
  isPlaying.value=true;
};



const xAxis = ref([
  {
    type: 'category',
    boundaryGap: true,
    data: (function () {
      let now = new Date();
      let res = [];
      let len = 10;
      while (len--) {
        res.unshift(formatTime2(now).replace(/^\D*/,''));
        now = new Date(now.getTime() - 2000);
      }
      return res;
    })()
  },
  {
    type: 'category',
    boundaryGap: true,
    data: (function () {
      let res = [];
      let len = 10;
      while (len--) {
        res.push(10 - len - 1);
      }
      return res;
    })()
  }
]);

// W = "W"
// N1 = "N1"
// N2 = "N2"
// N3 = "N3"
// REM = "REM"
const getSleepStageLabel = (value: number) => {
  if (value > 100 && value <= 200) {
    return 'W';
  } else if (value > 200 && value <= 400) {
    return 'N1';
  } else if (value > 400 && value <= 600) {
    return 'N2';
  } else if (value > 600 && value <= 800) {
    return 'N3';
  } else if (value > 800 && value <= 1000) {
    return 'W';
  }
  return '';
};

const yAxis = ref([
  {
    type: 'value',
    scale: true,
    name: '信号值',
    max: 200,
    min: -200,
  },
  {
    type: 'value',
    scale: true,
    name: '分期结果',
    max: 1200,
    min: 0,
    axisLabel: {
      // 根据value的值显示不同的标签
      formatter: getSleepStageLabel
    }
  }
]);

const barValues = [ 
  {
    value: 200,
    showBackground: true,
    itemStyle: {
      // @ts-ignore
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#83bff6' },
        { offset: 0.5, color: '#188df0' },
        { offset: 1, color: '#188df0' }
      ])
    },
    emphasis: {
      itemStyle: {
        // @ts-ignore
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#2378f7' },
          { offset: 0.7, color: '#2378f7' },
          { offset: 1, color: '#83bff6' }
        ])
      }
    }
  },
  {
    value: 400,
    showBackground: true,
    itemStyle: {
      // 使用青绿色渐变
      // @ts-ignore
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#00FFCC' },
        { offset: 0.5, color: '#00CC99' },
        { offset: 1, color: '#00CC99' }
      ])
    },
    emphasis: {
      itemStyle: {
        // 青绿色强调色渐变
        // @ts-ignore
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#009973' },
          { offset: 0.7, color: '#009973' },
          { offset: 1, color: '#00FFCC' }
        ])
      }
    }
  },
  {
    value: 600,
    showBackground: true,
    itemStyle: {
      // 使用新的颜色，这里选择绿色
      // @ts-ignore
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#32CD32' },
        { offset: 0.5, color: '#228B22' },
        { offset: 1, color: '#228B22' }
      ])
    },
    emphasis: {
      itemStyle: {
        // 使用淡绿色强调颜色
        // @ts-ignore
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#90EE90' }, // 淡绿色起始色
          { offset: 0.7, color: '#90EE90' }, // 淡绿色中间色
          { offset: 1, color: '#32CD32' } // 与原颜色衔接
        ])
      }
    }
  },
  {
    value: 800,
    showBackground: true,
    itemStyle: {
      // 使用黄色
      // @ts-ignore
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#FFFF00' },
        { offset: 0.5, color: '#FFD700' },
        { offset: 1, color: '#FFD700' }
      ])
    },
    emphasis: {
      itemStyle: {
        // 淡黄色强调色渐变
        // @ts-ignore
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#FFFF00' }, // 淡黄色起始色
          { offset: 0.7, color: '#FFD700' }, // 淡黄色中间色
          { offset: 1, color: '#FFFF00' } // 与原颜色衔接
        ])
      }
    }
  },
  {
    value: 1000,
    showBackground: true,
    itemStyle: {
      // 使用红色
      // @ts-ignore
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#FF0000' }, // 红色起始色
        { offset: 0.5, color: '#CC0000' }, // 红色中间色
        { offset: 1, color: '#CC0000' } // 红色结束色
      ])
    },
    emphasis: {
      itemStyle: {
        // 淡红色强调色渐变
        // @ts-ignore
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#FF6666' }, // 淡红色强调起始色
          { offset: 0.7, color: '#FF6666' }, // 淡红色强调中间色
          { offset: 1, color: '#FF0000' } // 淡红色强调结束色
        ])
      }
    }
  }
];

const series = ref([
  {
    name: '睡眠分期',
    type: 'bar',
    xAxisIndex: 1,
    yAxisIndex: 1,
    data: (function () {
      let res = [];
      // let len = 10;
      // while (len--) {
      //   const randomIndex = Math.floor(Math.random() * barValues.length);
      //   res.push(barValues[randomIndex]);
      // }
      return res;
    })()
  },
  {
    name: 'EEG信号',
    type: 'line',
    data: (function () {
      let res = [];
      // let len = 0;
      // while (len < 10) {
      //   res.push(parseFloat((Math.random() * 10 + 5).toFixed(1)));
      //   len++;
      // }
      return res;
    })()
  }
]);

// @ts-ignore
const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#283b56'
      }
    },
    renderMode: 'richText',
    position: (point, paras, dom, rect, size) => {
      // 假设自定义的tooltips尺寸
      const box = [170, 170]
      // 偏移
      const offsetX = point[0] < size.viewSize[0] / 2 ? 20 : -box[0] - 20
      const offsetY = point[1] < size.viewSize[1] / 2 ? 20 : -box[1] - 20
      const x = point[0] + offsetX
      const y = point[1] + offsetY

      position.value = [x, y]
      params.value = paras
    },
    formatter: (params, ticket, callback) => {},
  },
  legend: {
    data: ['睡眠分期', 'EEG信号']
  },
  dataZoom: {
    show: false, 
    start: 0,
    end: 100
  },
  xAxis: xAxis.value,
  yAxis: yAxis.value,
  series: series.value
};

let chart = null;

const showTip = ref(false);
const position = ref([0, 0]);
const params = ref([]);
// 定义定时器变量
let timer: ReturnType<typeof setInterval>;

// 新建计算属性 SleepDuration
const sleepDuration =ref('0分钟');

let count = 0;//当前网格中数据量
  
const init = async () => {
  if(chartRef.value === null) return;
  // @ts-ignore
  chart = await chartRef.value!.init(echarts, null)
  // @ts-ignore
  chart.setOption(option)
  // 监听tooltip显示事件
  // @ts-ignore
  chart.on('showTip', (params) => {
    showTip.value = true
  })
  // @ts-ignore
  chart.on('hideTip', (params) => {
    setTimeout(() => {
      showTip.value = false
    }, 300)
  })
  // let zoomSize = 6;
  // chart.on('click', function (params) {
  //   let dataAxis=option.xAxis[0].data;
  //   chart.dispatchAction({
  //     type: 'dataZoom',
  //     startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
  //     endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, option.series[0].data.length - 1)]
  //   });
  // })


  TGDConnect((report,lastEEG) => {
	  if (chart) {
	    // 在这里可以对 option 和 chart 进行操作
	    var axisData = formatTime2(new Date()).replace(/^\D*/, '');
	    var data0 = option.series[0].data;
	    var data1 = option.series[1].data;
		if (count>=10) {//超过十个移除旧数据
			 data0.shift();
			 data1.shift();
		}

	    data0.push(barValues[parseInt(report)]);
	    // data1.push(parseFloat((Math.random() * 10 + 5).toFixed(1)));
		console.log(lastEEG);
		data1.push(Math.floor(lastEEG));
	    option.xAxis[0].data.shift();
	    option.xAxis[0].data.push(axisData);
	    option.xAxis[1].data.shift();
	    option.xAxis[1].data.push(count++);
	    // @ts-ignore
	    if (chart && typeof chart.setOption === 'function') {
	      chart.setOption(option);
	    }
	
	  }
  }
  , baseURL);
  timer = setInterval(() => {
      if (isMonitoring.value && fallAsleepTime.value) {
        sleepDuration.value=getSleepDuration();
      }
  }, 1000); // 每 1 秒执行一次 计算 睡眠时间
}

const close =  () => { 
	console.log("清空图表数据")
	count = 0;
	// @ts-ignore
	option.series[0].data=[];
	option.series[1].data=[];
    console.log(option.series[0].data)
	chart.setOption(option);
	TGDClose();
	sleepDuration.value='0分钟';
	clearInterval(timer);
}
// 卸载时清除定时器
onUnmounted(() => {
  clearInterval(timer);
});
</script>


<style lang="scss" scoped>
/* 页面样式 */
.mobile-item-container {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom, #a5d8f3, #c7e6f5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  padding: 20rpx 0;
}

/* 音乐播放区域 */
.music-container {
  position: relative;
  margin-top: 30rpx;
  width: 80%;
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 可根据需求调整父容器样式 */
.parent-container {
  overflow: hidden; /* 确保滚动效果正常显示 */
  line-height: 50rpx; /* 让行高等于容器高度 */
  text-align: center; /* 如果还需要水平居中，可添加此属性 */
}
/* 中心圆形 */
.center-circle {
  width: 250rpx;
  height: 250rpx;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0rpx 40rpx 100rpx rgba(0, 0, 0, 0.2);
}

.center-icon {
  width: 180rpx;
  height: 180rpx;
  transition: transform 1s linear; // 添加过渡效果
  border-radius: 50%;
}

/* 旋转动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 旋转类 */
.rotate {
  animation: rotate 10s linear infinite; // 每10秒旋转一圈
}

.u-popup-slot {
  @include flex;
  justify-content: center;
  align-items: center;
}

/* 四个信息点 */
.info-bubble {
  position: absolute;
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  box-shadow: 0rpx 30rpx 60rpx rgba(0, 0, 0, 0.15);
}

.info-text {
  font-weight: bold;
  color: #444;
}

.info-label {
  font-size: 25rpx;
  color: #666;
}

/* 位置调整 */
.sleep-time { top: 0; left: 50%; transform: translateX(-50%); }
.wake-time { bottom: 0; left: 50%; transform: translateX(-50%); }
.volume { left: 10%; top: 50%; transform: translateY(-50%); }
.temperature { right: 10%; top: 50%; transform: translateY(-50%); }

/* 播放状态 */
.playing-text {
  font-size: 40rpx;
  color: #3c9cff;
  height: 260rpx;
  width: 100%;
  text-align: center;
}

.tip-container {
  margin-top: 10rpx;
  width: 100%;
  height: 20%;
  text-align: center;
}

/* 底部音乐控制栏（3 个按钮） */
.music-controls {
  width: 90%;
  height: 15%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 60rpx;
  box-shadow: 0rpx -20rpx 80rpx rgba(0, 0, 0, 0.1);
}

/* 控制按钮（上一曲/下一曲，圆形样式） */
.control-button {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0rpx 30rpx 60rpx rgba(0, 0, 0, 0.2);
}

/* 底部按钮图标 */
.control-icon {
  width: 120rpx;
  height: 120rpx;
}

.play-icon {
  width: 35rpx;
  height: 35rpx;
}

/* 歌曲名称样式（可自定义字体大小、颜色、粗细等） */
.song-title {
  font-size: 35rpx; /* 字体大小 */
  font-weight: 500; /* 字体粗细 */
  color: #333; /* 字体颜色 */
}

/* 歌手信息样式（与歌曲名区分） */
.singer-text {
  font-size: 30rpx; /* 字体更小 */
  color: #666; /* 颜色更浅 */
  font-weight: 300; /* 常规粗细 */
}
/* 音乐激活状态样式 */
.active {
  color: #00ea14;  /* 主题色，可自定义 */
}

/* 新增样式 */
.notice-bar-container {
  height: 25%;
  width: 80%;
}

.next-song-text {
  color: gray;
  font-size: 35rpx;
}


.popup-content {
  margin: 40rpx 20rpx;
}

.popup-title {
  margin-top: 0;
}

.song-item {
  margin: 40rpx 0rpx;
}
/* 这里可以添加组件的样式 */
.sleep-graph-container {
  position: relative;
}
.customTooltips {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20rpx;
}
/* 图例 */
/* 睡眠趋势 */
.chart-section {
  display: flex;
  justify-content: space-around;
}
.tip-content {
  display: flex;
  justify-content: space-between;
}
.legend-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tip-color{
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
  border-radius: 6rpx;
}
.legend-color {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
  border-radius: 6rpx;
}
.n1-sleep { background-color: #83bff6; }
.n2-sleep { background-color: #00FFCC; }
.n3-sleep { background-color:  #32CD32; }
.awake { background-color: #FF0000; }
.rem-sleep { background-color: #FFFF00;}
.legend-text{
  font-size: 22rpx;
}
</style>

